(function () {
  let arr = [
    {
      title: '故障设备监控',
      subTitle: ['故障时间', '设备地址', '异常代码'],
      contentArr: [
        {
          time: '20150102',
          address: '北京市昌平西路金燕龙写字楼',
          code: 100001,
        },
        {
          time: '20151215',
          address: '北京市海淀区上地大厦',
          code: 100022,
        },
        {
          time: '20160322',
          address: '天津市滨海新区互联网大厦',
          code: 100103,
        },
        {
          time: '20161012',
          address: '广州市南沙区可爱路',
          code: 100704,
        },
        {
          time: '20170611',
          address: '深圳市盐田区五道口大街',
          code: 103205,
        },
        {
          time: '20181112',
          address: '上海市宝山区南大街22号',
          code: 100008,
        },
        {
          time: '20180520',
          address: '天津市市区梅花大厦',
          code: 100011,
        },
        {
          time: '20190914',
          address: '北京市朝阳区人民写字楼',
          code: 100025,
        },
        {
          time: '20201102',
          address: '北京市东城区公园',
          code: 100301,
        },
        {
          time: '20201103',
          address: '石家庄市桥西区大龙写字楼',
          code: 105001,
        },
      ],
    },
    {
      title: '异常设备监控',
      subTitle: ['异常时间', '地址', '代码'],
      contentArr: [
        {
          time: '20201103',
          address: '石家庄市桥西区大龙写字楼',
          code: 105001,
        },
        {
          time: '20160322',
          address: '天津市滨海新区互联网大厦',
          code: 100103,
        },
        {
          time: '20170611',
          address: '深圳市盐田区五道口大街',
          code: 103205,
        },
        {
          time: '20151215',
          address: '北京市海淀区上地大厦',
          code: 100022,
        },
        {
          time: '20181112',
          address: '上海市宝山区南大街22号',
          code: 100008,
        },
        {
          time: '20180520',
          address: '天津市市区梅花大厦',
          code: 100011,
        },
        {
          time: '20190914',
          address: '北京市朝阳区人民写字楼',
          code: 100025,
        },
        {
          time: '20150102',
          address: '北京市昌平西路金燕龙写字楼',
          code: 100001,
        },
        {
          time: '20201102',
          address: '北京市东城区公园',
          code: 100301,
        },
        {
          time: '20161012',
          address: '广州市南沙区可爱路',
          code: 100704,
        },
      ],
    },
  ];
  arr.forEach(function (value, index) {
    // 展示头部tab数据
    let node = `<a href="javascript:;" data-index="${index}" class="${
      index === 0 ? 'active' : ''
    }">${value.title}</a>`;
    $('.inner .tabs').append(node);
    // 展示默认底部数据
    if (index === 0) {
      // 这个value是index为1的value
      load(value);
      //   value.subTitle.forEach(function (value) {
      // 底部tab栏数据
      //     $('.content .head').append(`<span class="col">${value}</span>`);
      //   });
      //   value.contentArr.forEach(function (value) {
      //     let node = `<div class="row">
      //         <span class="col">${value.time}</span>
      //         <span class="col">${value.address}</span>
      //         <span class="col">${value.code}</span>
      //         <span class="icon-dot"></span>
      //     </div>`;
      // 底部滚动数据(滚动动画是css完成的)
      //     $('.marquee').append(node);
      //   });
      // 应为设置了滚动(transform: translateY(-50%);)为了不留空白, 所以再次克隆数据,实现无限滚动
      //   $('.marquee').append($('.marquee div').clone());
    }
  });
  // 点击改变高亮和数据
  $('.tabs a').on('click', function () {
    $(this).addClass('active').siblings().removeClass('active');
    let index = $(this).index();
    let value = arr[index];
    // 传参
    // 这个value是点哪个,哪个下标的value
    load(value);
  });
  // 函数设置了形参,因为value是有两个的
  function load(value) {
    $('.content .head').empty();
    value.subTitle.forEach(function (value) {
      $('.content .head').append(`<span class="col">${value}</span>`);
    });
    $('.marquee').empty();
    value.contentArr.forEach(function (value) {
      let node = `<div class="row">
            <span class="col">${value.time}</span>
            <span class="col">${value.address}</span>
            <span class="col">${value.code}</span>
            <span class="icon-dot"></span>
        </div>`;
      $('.marquee').append(node);
    });
    $('.marquee').append($('.marquee div').clone());
  }
})();
